<div class="flex flex-col flex-auto min-w-0">

    <mat-drawer-container class="flex-auto">

        <!-- Drawer -->
        <mat-drawer
            class="w-72 dark:bg-gray-900"
            [autoFocus]="false"
            [mode]="drawerMode"
            [opened]="drawerOpened"
            #matDrawer>
            <!-- Demo sidebar -->
            <demo-sidebar></demo-sidebar>
        </mat-drawer>

        <!-- Drawer content -->
        <mat-drawer-content class="flex flex-col">

            <!-- Main -->
            <div class="flex-auto p-6 sm:p-10">

                <!-- Drawer toggle -->
                <button
                    class="mb-4"
                    mat-icon-button
                    (click)="matDrawer.toggle()">
                    <mat-icon [svgIcon]="'heroicons_outline:menu'"></mat-icon>
                </button>

                <!-- CONTENT GOES HERE -->
                <div class="h-400 min-h-400 max-h-400 border-2 border-dashed border-gray-300 rounded-2xl"></div>

            </div>

        </mat-drawer-content>

    </mat-drawer-container>

</div>
